<template>
    <div class="custom-navbar text-left" :class="{fixed: fixed, 'primary': type === 'primary', 'white': type === 'white', 'grey': type === 'grey', 'black': type === 'black'}" :style="{paddingTop: statusBarHeight + 'px', opacity: opacity, zIndex: fixed ? 100 : 0}">
        <div class="navbar-content">
        <!-- <div class="navbar-content" :style="{ 'padding-top': padTop + 'px', 'padding-bottom': padTop + 'px', 'height': height + 'px'}"> -->
            <!-- tip: 这里必须使用div，而不是span -->
            <div v-if="backVisible || share || home || customActionVisible"
                class="navbar-action"
                :class="{'border': homeVisible || share || customActionVisible, 'padding': share}">
                <div class="flex-box">
                    <span v-if="backVisible" class="icon" @click="onClickBack">&#xe642;</span>
                    <span v-if="homeVisible" class="icon icon-home" @click="backHome">&#xe652;</span>
                    <wx-button v-if="share"
                        class="share flex-box btn btn-mobile"
                        :class="{'border-left': backVisible || homeVisible}"
                        open-type="share">
                        转发
                    </wx-button>
                    <span v-if="customActionVisible"
                        class="share btn btn-mobile"
                        :class="{'border-left': backVisible || homeVisible}"
                        @click="onClickCustomAction">
                        {{customActionText}}
                    </span>
                </div>
            </div>
            <div v-if="title" class="title font-medium" :class="{large: largeTitle, 'text-left': titleDir === 'left'}" :style="{'line-height': height + 'px'}">{{title}}</div>
        </div>
    </div>
</template>

<script>
import {
    mapState,
} from 'vuex';
import store from '@/store';
// 自定义nav
export default {
    name: 'CustomNav',
    props: {
        home: {
            type: Boolean,
            default: false,
        },
        share: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: 'grey',
        },
        title: {
            type: String,
        },
        titleDir: {
            type: String,
            default: 'center',
        },
        /** title的带下 */
        largeTitle: {
            type: String,
        },
        /** 透明度 */
        opacity: {
            type: Number,
            default: 1,
        },
        /** 固定 */
        fixed: {
            type: Boolean,
            default: false,
        },
        /** 自定义action是否显示 */
        customActionVisible: {
            type: Boolean,
            default: false,
        },
        /** 自定义action文本 */
        customActionText: {
            type: String,
            default: '',
        },
    },
    computed: {
        ...mapState({
            systemInfo: state => state.util.systemInfo,
            // 导航深度
            navDepth: state => state.util.navDepth,
            menuButtonRect: state => state.util.menuButtonClientRect,
        }),
        statusBarHeight() {
            return this.systemInfo ? this.systemInfo.statusBarHeight : 0;
        },
        padTop() {
            return this.menuButtonRect.top - this.statusBarHeight;
        },
        height() {
            return this.menuButtonRect.height;
        },
        /** 后退按钮是否可见 */
        backVisible() {
            return this.navDepth > 1;
        },
        /** 主页按钮是否可见 */
        homeVisible() {
            return this.navDepth === 1 && this.home;
        },
        /**
         * 是否在action中有中间border
         */
        borderLeftActive() {
            return (this.backVisible || this.homeVisible) && this.share;
        },
    },
    methods: {
        onClickBack() {
            wx.navigateBack();
        },
        backHome() {
            wx.reLaunch({
                url: '/pages/main/index',
            });
        },
        /** 点击自定义action */
        onClickCustomAction() {
            this.$emit('custom');
        },
    },
    onShow() {
        const pages = getCurrentPages();
        store.commit('setNavDepth', pages.length);
    },
    // onReady() {
    //     this.menuButtonRect = wx.getMenuButtonBoundingClientRect();
    // },
    onLoad() {
        const pages = getCurrentPages();
        store.commit('setNavDepth', pages.length);
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.custom-navbar {
    width: 100%;
    &.grey {
        background: @nav-grey-color;
    }
    &.white {
        background: @white-color;
    }
    &.primary {
        color: @black-color;
        background-color: @primary-color;
        .share {
            color: @white-color;
        }
    }
    &.black {
        color: @white-color;
        background: @black-color;
    }
    z-index: 2;
    &.fixed {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
    }
    .navbar-content {
        position: relative;
        height: @custom-nav-height;
        padding: @custom-nav-content-padding-v @custom-nav-content-padding-h;
        // font-size: 28rpx;
        .text-normal();
    }
    .icon {
        display: inline-block;
        padding-right: 10rpx;
        font-size: 56rpx;
        line-height: 68rpx;
    }
    // 分享按钮
    .navbar-action {
        box-sizing: border-box;
        display: inline-block;
        height: 100%;
        padding-left: 10rpx;
        padding-right: 10rpx;
        vertical-align: top;
        border-radius: @text-large-line-height / 2 + @custom-nav-btn-padding-v;
        .icon {
            font-size: @text-giant-line-height;
            line-height: @text-normal-line-height;
            vertical-align: top;
        }
        .share {
            display: inline-block;
            padding: 0 10rpx;
            font-size: 28rpx;
            .text-normal();
            vertical-align: top;
            &.border-left {
                border-left: 1rpx solid #eee;
                border-radius: 0;
            }
        }
        &.padding {
            padding: @custom-nav-btn-padding-v @custom-nav-btn-padding-h;
        }
        &.border {
            border: 1px solid #eee;
        }
        .icon-home {
            // color: @white-color;
            padding: 0 10rpx;
            font-size: 46rpx;
        }
    }
    .title {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: 360rpx;
        transform: translate(-50%, -50%);
        font-size: @text-giant-font-size;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &.large {
            font-size: @text-large-font-size;
        }
    }
    .btn {
        vertical-align: middle;
    }
    .text-left {
        left: inherit;
        transform: translate(0, -50%);
    }
    .flex-box {
        display: flex;
        align-items: center;
        height: 100%;
    }
}
</style>
